<template>
	<view class="technician-info order-pages rel" v-if="detail.id">
		<!-- <back></back> -->
		<banner @change="goBanner" :list="detail.banner" :margin="0" :autoplay="true" :height="717"
			v-if="detail.banner.length > 0">
		</banner>
			<view class="abs flex-between pd-sxm-lr" style="top: 25rpx;left: 0;width: 100%;">
				<view class="radios_box transparent">返</view>
				<view class="flex-between">
					<view class="radios_box transparent">首</view>
					<view class="radios_box ml-sm transparent">个</view>
				</view>
			</view>
			<view class="abs pd-sxm-lr" style="top: 550rpx;right: 0;">
				<view class="radios_box mr-sm transparent">喜</view>
			</view>
			<view class="abs flex-between pd-sxm-lr" style="top: 610rpx;left: 0;width: 100%;">
				<view class="radios_lbox transparent">真人实拍87%相似</view>
				<view class="flex-between">
					<view class="radios_box transparent">左</view>
					<view class="ml-sm radios_bigbox transparent">下</view>
				</view>
			</view>
		<!-- <view class="ft-label flex-y-center f-paragraph">
			<view class="ft-time flex-center c-base pl-lg pr-lg pt-md pb-md rel" >
				<view class="ft-bg abs" :style="{background:primaryColor}"></view>
				<view @tap.stop="toJump('ftList')" v-for="(item) in ftList" class="ft">
					<i class="iconfont" :class="item.icon" :style="{color:primaryColor}"></i>
					<span class="c-title ml-sm">{{ item.text }}</span>
				</view>	
			</view>
		</view>		 -->
		<view class="pd-lg fill-base">
			<view class="flex-between">
				<view class="flex-between">
					<view class="f-title c-black text-bold max-500">{{ detail.coach_name || '-' }}</view>
					<view class="time-label flex-y-center ml-md f-icontext c-base" v-if="detail.near_time"
						:style="{ border: `1rpx solid ${primaryColor}` }">
						<view class="near-text flex-center" :style="{ background: primaryColor }">今日可约</view>
						<view class="near-time flex-center c-base rel" :style="{ color: primaryColor }">
							<view class="bg abs" :style="{ background: primaryColor }"></view>
							{{ detail.near_time }}
						</view>
					</view>
				</view>
				<view @tap.stop="toShield" class="flex-y-center">
					<!-- <view class="like-label flex-center mr-sm radius"
						:style="{background:detail.is_shield?'#FF8D4C':''}">
						<i class="iconfont"
							:class="[{'iconbuxihuan c-caption':!detail.is_shield},{'iconbuxihuan-xuanzhong c-base':detail.is_shield}]"></i>
					</view> -->
					<i class="iconfont iconjuli" :style="{ color: primaryColor }"></i>
					<view class="c-title ml-sm f-title text-bold">2.3km</view>
				</view>
			</view>
			<view class="flex-y-center mt-sm flex-between">
				<view class="flex-y-center mt-sm">
					<view class="service-label flex-center f-icontext">
						<!-- {{textType[detail.text_type]}} -->
						实名认证 <!-- New-->
					</view>
					<view class="service-label flex-center f-icontext">
						<!-- {{textType[detail.text_type]}} -->
						{{ detail.native_place }}
					</view>
					<view class="service-label flex-center f-icontext">
						<!-- {{textType[detail.text_type]}} -->
						{{detail.age}}岁
					</view>
				</view>
				<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
					:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toEmit('order')" style="width:130rpx;">
					<view class="item-btn f-icontext pd-sm flex-center c-base radius-24"
						:style="{ background: `linear-gradient(68deg, ${primaryColor}, ${subColor})` }">
						立即预约
					</view>
				</auth>
			</view>
			<view class="flex-between mt-lg f-icontext c-caption">
				<!-- <block v-if="(detail.store_id && detail.store_name) || (detail.admin_id && detail.admin_name)">
					<view @tap.stop="goStoreMerchant" class="flex-y-center">
						<i class="iconfont icondianpu"></i>
						<view class="ellipsis" style="max-width: 250rpx;">{{ detail.store_name || detail.admin_name }}
						</view>
					</view>
					<view class="line"></view>
				</block>
				<view class="flex-y-baseline">
					<i class="iconfont iconpingfen1 icon-font-color"></i>
					<view class="star-text flex-y-center f-caption">{{ detail.star || 0 }}</view>
				</view>
				<view class="line"></view>
				<view>已服务{{ detail.order_num > 9999 ? '9999+' : detail.order_num }}单</view>
				<view class="line"></view>
				<view>从业{{ detail.work_time }}年</view> -->
				<view class="text-bold c-black">遇江南</view>
				<view style="font-size:15rpx;">33人已关注</view>
			</view>
		</view>
		<view class="fill-base mt-md pt-lg pl-lg pr-md">
			<!-- <view class="pb-lg f-paragraph c-black text-bold">{{ `${$t('action.attendantName')}简介` }}</view> -->
			<view class="flex-center">
				<view style="width: 100rpx;">相册</view>
				<scroll-view scroll-x class="picture-list">
					<view @tap.stop="toPreviewImage(index, 'self_img')" class="picture-item"
						v-for="(item, index) in detail.self_img" :key="index">
						<!-- #ifdef H5 -->
						<view class="cover radius-16">
							<view class="h5-image cover radius-16" :style="{ backgroundImage: `url('${item}')` }">
							</view>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image mode="aspectFill" lazy-load class="cover radius-16" :src="item"></image>
						<!-- #endif -->
					</view>
				</scroll-view>
			</view>
			<view class="flex-center mt-sm">
				<view class="flex-1" style=" text-align: left;">属相：{{ detail.zodiac_animal }}</view>
				<view class="flex-1" style=" text-align: left;">星座：{{ detail.constellation }}</view>
				<view class="flex-1" style=" text-align: left;">性别：{{ detail.ethnic_group }}</view>
			</view>
			<view class="flex-center mt-sm">
				<view class="flex-1" style=" text-align: left;">民族：{{ detail.ethnic_group }}</view>
				<view class="flex-1" style=" text-align: left;">入驻：{{ detail.rz_time }}</view>
				<view class="flex-1" style=" text-align: left;">手法：{{ detail.star }}星</view>
			</view>
			<view class="flex-center mt-sm">
				<view class="flex-1" style=" text-align: left;">身高：{{detail.height}}cm</view>
				<view class="flex-1" style=" text-align: left;">体重：{{detail.weigh}}kg</view>
				<view class="flex-1"></view>
			</view>
			<view class="introduce-info pt-md f-paragraph c-title radius-16">
				<span v-if="!detail.showText">{{ detail.text.substring(0, 100000) }}</span>
				<view v-else>
					<text decode="emsp" style="word-break:break-all;">{{ detail.text }}</text>
				</view>
				<span @tap.stop="toShowHide('showText')"
					:class="[{ 'ml-md': !detail.showText }, { 'mt-md': detail.showText }]" :style="{ color: primaryColor }"
					v-if="detail.have_show_text">
				</span>
			</view>
			<view class="flex-y-center mt-md flex-between pd-sm" style="background-color: rgb(253, 250, 243);">
				<view class="flex-between"><i class="iconfont iconpingfen1 icon-font-color"></i>营业执照</view>
				<view class="flex-between"><i class="iconfont iconpingfen1 icon-font-color"></i>健康证</view>
				<view class="flex-between"><i class="iconfont iconpingfen1 icon-font-color"></i>按摩师证</view>
				<view class="flex" style="font-size: 20rpx;">查看<i class="iconfont iconpingfen1 icon-font-color"></i></view>
			</view>
		</view>
		<!-- <view class="fill-base mt-md pt-lg pl-lg pr-md pb-lg">
			<view class="pb-lg f-paragraph c-black text-bold">资质证书</view>
			<scroll-view scroll-x class="picture-list">
				<view @tap.stop="toPreviewImage(index, 'license')" class="picture-item"
					v-for="(item, index) in detail.license" :key="index">
					#ifdef H5
					<view class="cover radius-16">
						<view class="h5-image cover radius-16" :style="{ backgroundImage: `url('${item}')` }">
						</view>
					</view>
					#endif
					#ifndef H5
					<image mode="aspectFill" lazy-load class="cover radius-16" :src="item"></image>
					#endif


				</view>
			</scroll-view>
		</view> -->
		<view class="fill-base mt-md pt-lg pb-lg">
			<view @tap.stop="$util.goUrl({ url: `/shopstore/pages/service?id=${options.id}` })"
				class="flex-between pl-lg pr-md " :class="[{ 'pb-lg': serviceList.length > 0 }]">
				<view class="f-paragraph c-black text-bold">她服务的项目</view>
				<view @tap.stop="toComment" class="flex-y-center f-caption c-caption">xx条评论<text
						style="color: rgb(182, 88, 84);margin-left: 20rpx;">好评率xx%</text><i class="iconfont icongengduo"
						style="font-size: 24rpx;"></i></view>
			</view>

			<view class="pl-lg pr-lg b-1px-b mt-md pb-md" v-for="(item, index) in serviceList" :key="index">
				<service-list-item @order="toOrder(index)" from="technician-info" :info="item"
					maxWidth="490rpx"></service-list-item>
			</view>
		</view>
		<view class="space-footer"></view>
		<technician-list-popup ref="technician_list_popup" from="technician-info"></technician-list-popup>
	</view>
</template>

<script>
import {
	mapState,
	mapActions,
	mapMutations
} from "vuex"
import serviceListItem from "@/components/service-list-item.vue"
import technicianListPopup from "@/components/technician-list-popup.vue"
export default {
	components: {
		serviceListItem,
		technicianListPopup
	},
	data() {
		return {
			options: {},
			textType: {
				1: '可服务',
				2: '服务中',
				3: '可预约',
				4: '不可预约'
			},
			ftList: [{
				icon: 'icon-kzj',
				text: '实名认证'
			}, {
				icon: 'icon-kpk',
				text: '爽约包赔'
			}, {
				icon: 'icon-sybp',
				text: '超时秒退'
			}, {
				icon: 'icon-kzz',
				text: '资质证书'
			}],
			detail: {},
			serviceList: [],
			loading: true,
		}
	},
	computed: mapState({
		primaryColor: state => state.config.configInfo.primaryColor,
		subColor: state => state.config.configInfo.subColor,
		configInfo: state => state.config.configInfo,
		userInfo: state => state.user.userInfo,
	}),
	onLoad(options) {
		this.options = options
		this.initIndex()
	},
	onPullDownRefresh() {
		// #ifndef APP-PLUS
		uni.showNavigationBarLoading()
		// #endif
		this.initRefresh();
		uni.stopPullDownRefresh()
	},
	methods: {
		...mapActions(['getConfigInfo', 'getUserInfo']),
		...mapMutations(['updateTechnicianItem', 'updateUserItem']),
		async initIndex() {
			// #ifdef H5
			if (this.$jweixin.isWechat()) {
				await this.$jweixin.initJssdk();
				this.$jweixin.wxReady(() => {
					this.$jweixin.hideOptionMenu()
				})
			}
			// #endif
			await this.getDetail()
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			uni.setNavigationBarTitle({
				title: this.$t('action.attendantName') + '详情'
			})
			await this.getList()
		},
		initRefresh() {
			this.initIndex(true)
		},
		async getDetail() {
			var that = this
			console.log(uni.getStorageSync('autograph'),'获取到的数据');
			let {
				id
			} = that.options
			
			let data = await that.$api.service.coachInfo({
				id
			});
			
			data.banner = data.video ? [{
				jump_type: 'video',
				img: data.work_img,
				jump_url: data.video
			}] : [{
				img: data.work_img
			}]
			let have_show_text = data.text.length > 42
			data.have_show_text = have_show_text
			data.showText = !have_show_text
			that.detail = data
		},
		async getList() {
			let {
				id: coach_id
			} = this.options
			let {
				data
			} = await this.$api.service.coachServiceList({
				coach_id
			});
			console.log(data,'技师列表')
			this.serviceList = data
			this.loading = false
			this.$util.hideAll()
		},
		async toShield() {
			let {
				id
			} = this.options
			await this.$api.mine.shieldCoachAdd({
				type: 2,
				coach_id: id
			})
			this.updateUserItem({
				key: 'haveShieldOper',
				val: 2
			})
			this.$util.back()
			setTimeout(() => {
				this.$util.goUrl({
					url: 1,
					openType: `navigateBack`
				})
			}, 1000)
		},
		// 预约
		async toOrder(index) {
			let {
				is_work = 0
			} = this.detail
			if (!is_work) {
				this.$util.showToast({
					title: `该${this.$t('action.attendantName')}未上班`
				})
				return
			}
			let {
				id: service_id,
			} = this.serviceList[index]
			let {
				id: coach_id
			} = this.options
			if (this.lockTap) return;
			this.lockTap = true;
			try {
				await this.$api.order.addCar({
					service_id,
					coach_id,
					num: 1,
					is_top: 1,
					coach_service: 1
				})
				this.lockTap = false
				let url = `/user/pages/order?id=${coach_id}&ser_id=${service_id}`
				this.$util.goUrl({
					url
				})
			} catch (e) {
				this.lockTap = false
			}
		},
		toShowHide(key) {
			this.detail[key] = !this.detail[key]
		},
		toComment() {
			this.$refs.technician_list_popup.toShowPopup(this.detail, 'message')
		},
		toPreviewImage(index, key = 0) {
			let urls = this.detail[key]
			if (key == 'work_img') {
				urls = [urls]
			}
			this.$util.previewImage({
				current: urls[index],
				urls
			})
		},
		goStoreMerchant() {
			let {
				store_id,
				admin_id
			} = this.detail
			let url = store_id ? `/shopstore/pages/detail?id=${store_id}` : `/user/pages/merchant-info?id=${admin_id}`
			this.$util.goUrl({
				url
			})
		},
		goBanner() {
			console.log('123465');
		}
	}
}
</script>


<style lang="scss">
.technician-info {
	.cover-img {
		width: 750rpx;
		height: 417rpx;
	}

	.radios_box {
		width: 60rpx;
		height: 60rpx;
		border-radius: 45rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.radios_lbox {
		line-height: 40rpx;
		padding: 5rpx 30rpx;
		font-size: 25rpx;
		border-radius: 25rpx;
	}

	.radios_bigbox {
		width: 90rpx;
		height: 90rpx;
		border-radius: 45rpx;
		text-align: center;
		line-height: 90rpx;

	}
	.transparent{
		background: rgba(0, 0, 0, 0.25);
		color: white;
	}

	.like-label {
		width: 42rpx;
		height: 42rpx;
		background: #EFEFEF;

		.iconfont {
			font-size: 24rpx;
			margin-top: 5rpx;
		}
	}

	.service-label {
		min-width: 88rpx;
		height: 32rpx;
		padding: 0 10rpx;
		color: rgb(166, 143, 123);
		background: rgb(253, 248, 239);
		border-radius: 4rpx;
		margin-right: 20rpx;
	}

	.time-label {

		.near-text {
			width: 110rpx;
			height: 38rpx;
			background: #F5F5F5;
			border-radius: 3rpx 0 0 3rpx;
		}

		.near-time {
			width: 110rpx;
			height: 38rpx;
			border-radius: 0 3rpx 3rpx 0;

			.bg {
				opacity: 0.1;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
				border-radius: 0 3rpx 3rpx 0;
			}
		}
	}

	.ft-label {
		.near-text {
			width: 100%;
			height: 33rpx;
			background: #F5F5F5;
		}

		.ft-time {
			width: 100%;
			height: 76rpx;

			.ft-bg {
				opacity: 0.1;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
				border-radius: 10rpx;
			}
		}

		.ft {
			display: flex;
			align-items: center;
			width: 100%;
		}

		.tp-img {
			width: 183px;
			height: 16px;
		}
	}

	.icondianpu {
		margin-right: 6rpx;
	}

	.iconpingfen1 {
		font-size: 24rpx;
		background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
	}

	.star-text {
		height: 26rpx;
		color: #FF9519;
		margin-left: 6rpx;
	}

	.line {
		width: 1rpx;
		height: 11rpx;
		background: #979797;
		margin: 0 18rpx;
	}

	.introduce-info {
		width: 690rpx;
	}

	.picture-list {
		white-space: nowrap;
		width: 690rpx;

		.picture-item {
			width: 122rpx;
			margin-left: 20rpx;
			display: inline-block;

			.cover {
				width: 122rpx;
				height: 122rpx;
			}
		}

		.picture-item:nth-child(1) {
			margin-left: 0;
		}
	}

	.comment-item {
		.avatar {
			width: 52rpx;
			height: 52rpx;
			background: #f4f6f8;
		}

		.iconpingfen1 {
			font-size: 28rpx;
			margin-right: 5rpx;
			font-size: 28rpx;
		}
	}

	.top_rz {
		width: 100%;
		height: 30px;
	}

	.image_loading {
		width: 100%;
		height: 100%;
	}

}</style>